<template>
  <div>
    <el-card>
      <!-- 可折叠的乘客信息列表 -->
      <el-collapse value="1">
        <el-collapse-item name="1">
          <template slot="title">
            <el-row justify="space-between">
              <el-col class="passList_title" :span="16">
                <img :src="require('../../assets/img/fasco.png')" alt />
                乘客信息/Traveler
              </el-col>
              <el-col class="add_travel_info_btn" :span="8">
                <el-button class="passList_clean" @click.stop="cleanpassList">
                  清空乘机人
                  <br />Remove All
                </el-button>
                <el-button class="passList_add" @click.stop="getTravelList" type="primary">
                  添加乘机人
                  <br />Add Traveler
                </el-button>
                <!-- <div class="bubble">1</div> -->
              </el-col>
            </el-row>
          </template>
          <div class="passlit_context">
            <div v-if="currenthasadd==0" class="context_tips">
              <p>请至少添加一名乘客</p>
              <p>Please add one traveler at least.</p>
            </div>
            <div v-else class="context_list">
              <el-row :gutter="10">
                <!-- 单个travel信息标签 -->
                <el-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="6"
                  :xl="6"
                  v-for="item in hasAdd"
                  :key="item.$id"
                >
                  <div class="grid-content bg-purple">
                    <el-row :gutter="4">
                      <el-col class="pass_name" :span="5">
                        <strong>{{item.FullNameChs}}</strong>
                      </el-col>
                      <el-col class="pass_info" :span="15">
                        <div>手机/Mobile:{{item.MobileNo1 | mobile}}</div>
                        <div>证件/ID No:{{item.StaffNo | identity}}</div>
                      </el-col>
                      <el-col class="pass_delect" :span="4">
                        <a @click="deletecurrentTravel(item.$id)">
                          <i class="el-icon-delete"></i>
                        </a>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="passList_tips">
            <div>请确保拼音姓名与所持登机证件一致。 Please ensure that your pinyin name is the same as that on your boarding pass.</div>
            <div>若您更新了相关证件信息，请联系4006100555更新已出票的信息。 If you have updated your ID information, please contact 4006100555 to renew the information of the issued ticket.</div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <el-row>
        <el-col class="passList_title" :span="16">
          <img :src="require('../../assets/img/fasco.png')" alt />
          查询列表/Inquiry Form
        </el-col>
      </el-row>
      <!-- 查询数据筛选条件 -->
      <el-row>
        <el-col :span="1" class="select_travel">
          <i class="el-icon-edit"></i>
        </el-col>
        <el-col :span="4" class="select_travel">
          <el-select v-model="value" clearable placeholder="选择往返程">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="1" class="select_travel">
          <i class="el-icon-user"></i>
        </el-col>
        <el-col :span="6" class="select_travel">
          <el-select v-model="value2" clearable placeholder="选择往返程">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 时间地点查询框 -->
      <el-row class="query">
        <el-col class="query_item" :span="12">
          <el-row>
            <el-col :span="10">
              <div>出发地/From</div>
              <div class="query_item1">
                <el-input placeholder="请输入出发地" v-model="fromValue" clearable></el-input>
              </div>
            </el-col>
            <el-col class="query_icon" :span="4">
              <!-- 点击进行目的地见的切换 -->
              <div style="cursor:pointer" @click="changePlace">
                <img :src="require('../../assets/img/fly.png')" alt />
              </div>
            </el-col>
            <el-col class="query_item1" :span="10">
              <div>目的地/To</div>
              <div class="query_item1">
                <el-input placeholder="请输入目的地" v-model="toValue" clearable></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="query_item right" :span="12">
          <el-row>
            <el-col :span="8">
              <div>出发日期/Depart</div>
              <div class="query_item1">
                <el-date-picker
                  class="querydata"
                  v-model="querytoData"
                  type="date"
                  placeholder="选择出发日期"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col class="query_icon" :span="4">
              <div>
                <img :src="require('../../assets/img/fly.png')" alt />
              </div>
            </el-col>
            <el-col class="query_item1" :span="8">
              <div>返程日期/Return</div>
              <div class="query_item1">
                <el-date-picker
                  class="querydata"
                  v-model="querybackData"
                  type="date"
                  placeholder="选择返回日期"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col class="query_item1" align="right" :span="4">
              <el-button @click="serachInfo" class="query_btn" type="primary" icon="el-icon-search"></el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 航班信息的表格显示 -->
    <el-card class="queryInfo">
      <el-table v-loading="rloading" ref="table" :data="airinfo.result" style="width: 100%">
        <el-table-column width="180">
          <template slot="header">
            <P>航司</P>
            <P>Airline</P>
          </template>
          <template slot-scope="scope">
            <!-- <span>{{scope.row }}</span> -->
            <div class="Airline">
              <div class="Airline_img">
                <img :src="require(`../../assets/img/${scope.row.segments[0].aircompany}.png`)" alt />
              </div>
              <div class="Airline_info">
                <p>
                  <b>{{scope.row.segments[0].airline}}</b>
                </p>
                <p>{{scope.row.segments[0].companyname}}</p>
                <p>{{scope.row.segments[0].companyname_en}}</p>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            <P>出发信息</P>
            <P>Departure Info</P>
          </template>
          <template slot-scope="scope">
            <!-- <span>{{scope.row }}</span> -->

            <div>
              <p>
                <b>{{scope.row.segments[0].deptime | timer}}</b>
              </p>
              <p>{{scope.row.segments[0].dstpotname}}</p>
              <p>{{scope.row.segments[0].dstpotnameen}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>飞行时间</P>
            <P>Duration</P>
          </template>
          <template slot-scope="scope">
            <!-- <span>{{scope.row }}</span> -->

            <div>
              <p class="color">{{scope.row.segments[0].durationF3 | duration}}</p>
            </div>
            <div class="transit">
              <img :src="require('../../assets/img/Transit.png')" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>到达信息</P>
            <P>Arrival Info</P>
          </template>
          <template slot-scope="scope">
            <!-- <span>{{scope.row }}</span> -->

            <div>
              <p>
                <b>{{scope.row.segments[0].arritime | timer}}</b>
              </p>
              <p>{{scope.row.segments[0].orgpotname}}</p>
              <p>{{scope.row.segments[0].orgpotnameen}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>舱位</P>
            <P>Class</P>
          </template>
          <template>
            <div>
              <p class="color">
                <b>公务舱</b>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>座位</P>
            <P>Seats</P>
          </template>
          <template>
            <div>
              <p class="color">
                <b><i class="icon--3"></i><span class="boldicon">></span>9</b>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="220">
          <template slot="header">
            <P>价格</P>
            <P>Fare</P>
          </template>
          <template slot-scope="scope">
            <div>
              <p class="farecolor">
                <b>￥{{scope.row.segments[0].yprice}}</b>
                <span>起</span>
              </p>
            </div>
            <div>
              <el-button @click="toogleExpand(scope.row)" type="primary">更多/More</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- 展开行内嵌套内层表格展示仓位信息补充内容 -->
        <el-table-column class="innerTable" type="expand" width="1">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item>
                <!-- 内层表格循环数组内部cabins数组 -->
                <el-table :data="props.row.segments[0].cabins" style="width: 100%">
                  <el-table-column>
                    <template slot="header">
                      <P>舱位/Class</P>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        <p>{{scope.row.cabinname}}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>折扣/Discount</P>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        <p>{{scope.row.discountRate}}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>行李限额/Baggage Allowance</P>
                    </template>
                    <template>
                      <div>
                        <a @click.stop="baggagedialogVisible = true">查看详情/View Details</a>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>座位/Seats</P>
                    </template>
                    <template>
                      <div>
                        <p><i class="icon--3"></i><span class="boldicon">></span>9</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>可退/Refundable</P>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        <p v-if="scope.row.isRefundable">
                          <i class="el-icon-check"></i>
                        </p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>可改/Changeable</P>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        <p v-if="scope.row.isChangeable">
                          <i class="el-icon-check"></i>
                        </p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>限制条件/Restrictions</P>
                    </template>
                    <template>
                      <div></div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot="header">
                      <P>价格/Fare</P>
                    </template>
                    <template slot-scope="scope">
                      <div class="farecolor">
                        <p>￥{{scope.row.stgprice}}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <div>
                        <el-button @click="booking(scope.row.$cid)" type="primary">预订/Book</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加乘机人弹出框 -->
    <el-dialog title="可用乘机人列表/Passengers Available" :visible.sync="dialogVisible" width="450px">
      <el-row>
        <el-input
          placeholder="在此处查询可用乘机人/query passenger name here"
          prefix-icon="el-icon-search"
          v-model="passList_serach"
        ></el-input>
      </el-row>
      <div class="dialog_passList">
        <el-row
          class="addtravel_info"
          type="flex"
          justify="space-between"
          v-for="item in TravelList"
          :key="item.$id"
        >
          <el-col class="icon" :span="2">
            <el-checkbox v-model="item.isCheck"></el-checkbox>
          </el-col>
          <el-col :span="20">
            <p>
              <b>{{item.FltPaxnameDom}}</b>
            </p>
            <el-row>
              <el-col :span="12">手机号/Mobile No</el-col>
              <el-col :span="12">{{item.MobileNo1 | mobile}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">证件号/ID No</el-col>
              <el-col :span="12">{{item.StaffNo | identity}}</el-col>
            </el-row>
          </el-col>
          <el-col class="icon" :span="2">
            <a>
              <i class="el-icon-edit"></i>
            </a>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addToTravelList">
          添加乘机人列表
          <br />Add To Traveler List
        </el-button>
        <el-button @click="dialogVisible = false">
          添加新乘机人
          <br />Add New Traveler
        </el-button>
      </span>
    </el-dialog>
    <!-- 行李额度弹出框 -->
    <el-dialog title="行李限额/Baggage Allowance" :visible.sync="baggagedialogVisible" width="450px">
      <div class="dialog_passList">
        <p>无免费托运行李额度，2019年7月1日后生效。</p>
        <p>No free baggage check,Effective after July 1,2019</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="baggagedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="baggagedialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 购物车显示按钮 -->
    <div class="fixbtn">
      <el-badge v-if="bookingnumber !== 0 " :value="bookingnumber" class="item">
        <div @click="goshopping">
          <i class="el-icon-goods"></i>
        </div>
      </el-badge>
      <div v-else>
        <i class="el-icon-goods"></i>
      </div>

      <div>
        <i class="el-icon-phone-outline"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { log } from "util";
import { useState, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      rloading: false,
      infoValue: 1,
      querytoData: "2020-08-05T16:00:00.000Z",
      querybackData: "",
      fromValue: "北京",
      toValue: "上海",
      passList_serach: "",
      passnum: 0,
      dialogVisible: false,
      baggagedialogVisible: false,
      value: "选项1",
      value2: "选项2",
      options: [
        {
          value: "选项1",
          label: "单程/One Way",
        },
        {
          value: "选项2",
          label: "公务/Business Class",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      airinfo: [],
      TravelList: [],
      hasAdd: [],
      bookingInfo: [],
    };
  },
  created() {
    // 模拟数据 在初始页面的时候模拟异步操作进行json数据的引入
  },

  methods: {
    serachInfo() {
      if (
        this.toValue == "" ||
        this.fromValue == "" ||
        this.querytoData == ""
      ) {
        return this.$message.error("请输入查询信息");
      }
      this.rloading = true;
      setTimeout(() => {
        this.rloading = false;
        const info = require("../../plugins/airInfo.json");
        console.log(info);
        // 给获取到的数据每一个航班和其中每一个舱等添加一个对应的id
        info.Result.result.map((item, i) => {
          item.$id = i;
          item.segments[0].cabins.map((item1, z) => (item1.$cid = i + "-" + z));
        });
        this.airinfo = info.Result;
      }, 500);
    },
    // 添加乘机人 从json数据中请求当前已有旅客列表信息
    getTravelList() {
      this.dialogVisible = true;
      const info = require("../../plugins/user.json");
      // 获取数据后对每一项数据添加属性来判断当前是否为选中状态
      info.psglist.map((item) => {
        item.isCheck = false;
      });
      this.TravelList = info.psglist;
    },
    // 将选中的旅客添加到当前页面中显示
    addToTravelList() {
      this.dialogVisible = false;
      this.hasAdd = this.TravelList.filter((item) => item.isCheck);
    },
    // 删除当前单个乘客
    deletecurrentTravel(id) {
      const num = this.hasAdd.findIndex((item) => item.$id == id);
      this.hasAdd.splice(num, 1);
    },
    // 清空乘机人
    cleanpassList() {
      this.hasAdd = [];
    },
    dosometing() {},
    // 用来打开展开行的函数 用于自定义按钮的expand功能的实现
    toogleExpand(row) {
      this.$refs.table.toggleRowExpansion(row);
    },
    // 用于交换出发地和目的地按钮
    changePlace() {
      let item = "1";
      item = this.toValue;
      this.toValue = this.fromValue;
      this.fromValue = item;
    },
    // 预定仓位
    booking(info) {
      if (this.hasAdd.length == 0) {
        return this.$message.error("请选择乘机人");
      }
      const newArr = info.split("-");
      const booking = this.hasAdd;

      if (
        this.bookingInfo.some((item) =>
          this.hasAdd.some((item1) => {
            if (item1.FullNameChs == item.FullNameChs) {
              return item.bookinginfo.segments[0].cabins.$cid == info;
            }
          })
        )
      ){
        return this.$message.error("请勿重复预订");
      }

      booking.map((item) => {
        item.bookinginfo = JSON.parse(
          JSON.stringify(this.airinfo.result[Number(newArr[0])])
        );
        item.bookinginfo.segments[0].cabins = JSON.parse(
          JSON.stringify(item.bookinginfo.segments[0].cabins[Number(newArr[1])])
        );
        this.bookingInfo.push(item);
        
      });
    },
    goshopping() {
      sessionStorage.setItem('bookingInfo',JSON.stringify(this.bookingInfo))
      this.$router.push("/shoppingcart");
    },
    ...mapMutations(["changedrawer"]),
  },
  computed: {
    currenthasadd() {
      return this.hasAdd.length;
    },
    bookingnumber() {
      return this.bookingInfo.length;
    },
    ...mapState(["drawer"]),
  },
};
</script>
<style lang="less">
.el-collapse {
  border: none !important;
  .el-row {
    width: 100%;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;
  }
}
.dialog_passList {
  margin-top: 10px;
  .addtravel_info {
    border-bottom: 1px dotted #ccc;
    padding: 10px;

    .el-checkbox__inner {
      width: 18px;
      height: 18px;
    }
    .el-checkbox__inner::after {
      height: 12px;
      left: 6px;
    }
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
  }
}
.boldicon{
  margin:0 10px;
}
.query {
  color: #979797;
  margin: 5px 0px;
  border-radius: 5px;
  border: 1px solid #979797;
  .query_item {
    height: 90px;
    padding: 10px;
    box-sizing: border-box;
    .query_icon {
      display: flex;
      align-items: center;
      height: 70px;
    }
    .query_item1 {
      .el-date-editor {
        width: 70%;
      }
      .querydata {
        padding-left: 30px;
      }
      .el-input__inner {
        border: 1px solid #fff;
        padding: 0;
        font-size: 18px;
        font-weight: 600;
      }
      .query_btn {
        height: 70px;
        width: 70px;
        i {
          font-size: 30px;
        }
      }
    }
  }
  .right {
    border-left: 1px solid #979797;
  }
}
.bubble {
  margin-top: 10px;
  margin-left: 10px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #409eff;
  border-radius: 13px 13px 13px 5px;
  color: #fff;
}
.queryInfo {
  margin-top: 10px;
  .Airline {
    display: flex;
    .Airline_img {
      width: 30%;
      display: flex;
      align-items: center;
      margin-left: 20px;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .Airline_info {
      width: 70%;
      text-align: center;
    }
  }
  .transit {
    position: relative;
    img {
      position: relative;
      z-index: 1;
    }
  }
  .transit:after {
    content: " ";
    display: inline-block;
    width: 56%;
    position: absolute;
    top: 10px;
    height: 1px;
    border-top: 2px dashed #ccc;
    left: 22%;
  }
  .farecolor {
    color: #ff7600;
    font-size: 20px;
    span {
      font-size: 18px;
    }
  }
  .color {
    color: #515151;
    font-weight: 600;
  }
  .el-card__body {
    padding: 0 !important;
    .el-table {
      color: #212121;
      font-size: 14px;
      th {
        .cell {
          line-height: 20px;
        }
        background: linear-gradient(
          180deg,
          rgba(17, 112, 187, 1) 0%,
          rgba(7, 61, 133, 1) 100%
        );
        color: #fff;
        text-align: center;
      }
      td {
        text-align: center;
      }
      .el-table__expanded-cell {
        padding: 0 20px;
        border: 1px solid #ccc;
        .el-form-item {
          .el-form-item__content {
            width: 100%;
            tr {
              border: none;
              border-bottom: 1px dotted #ccc;
            }
          }
          width: 100%;
        }
        a {
          color: #4284c9;
        }
        th {
          .cell {
            line-height: 20px;
          }
          background: #fff;
          color: #515151;
          text-align: center;
        }
      }
    }
  }
}
</style>